<template>
  <div>

    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果转换历史明细</h2>
      <span>选修课学分：{{ user.credit }}</span>
      <span>成果累计积分：{{ user.scores }}</span>
    </div>
    <hr class="underline">


    <!-- 搜索日期查询 -->
    <div class="query " id="margins">
      <el-date-picker v-model="value1" @change="dateQuery()" type="monthrange" range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份">
      </el-date-picker>
    </div>



    <!-- 数据表格 -->
    <div class="tables " id="margins">
      <el-table :data="tData" highlight-current-row border>
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="s_number" label="学号" align="center">
        </el-table-column>
        <el-table-column prop="describe" label="描述" align="center" show-overflow-tooltip>

        </el-table-column>
        <el-table-column prop="subTime" label="提交日期" align="center" :formatter="formatSubTime">
        </el-table-column>
        <el-table-column prop="reviewTime" label="审核时间" align="center" :formatter="formatSubTime">
        </el-table-column>
        <el-table-column prop="t_number" label="审核人" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.t_number" style="color: #ccc;">审批中</span>
            <span v-else>{{ scope.row.t_number }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="scores" label="选修课学分" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.t_number" style="color:#ccc;">暂无</span>
            <span v-else-if="scope.row.reason" style="color:#ccc;">暂无</span>
            <span v-else>{{ scope.row.scores }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="驳回理由" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.outcome == 0">{{ scope.row.reason }}</span>
            <span v-else-if="scope.row.outcome == 1" style="color:#ccc;">暂无</span>
            <span v-else-if="scope.row.outcome == 2" style="color:#ccc;">已通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="outcome" label="审核结果" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-else-if="scope.row.outcome == 1">审批中</span>
            <span v-else-if="scope.row.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页封装 -->
      <Pagination :datas="filteredData" @pageChange="pageChange"></Pagination>
    </div>

  </div>
</template>
  
<script>
import { history } from "../../../api/student/achievementAPI"
import { getInfo } from "@/api/user"
import Pagination from '@/components/Pagination/pagination.vue'

export default {
  components: {
    // 分页组件
    Pagination
  },
  data() {
    return {
      //用户信息
      user: {},
      // 源表数据
      tableData: [],
      //分页后的数据
      tData: [],

      // 日期的查找范围
      value1: '',
    }
  },

  created() {
    this.users()
  },

  computed: {
    filteredData() {
      if (this.value1) {
        // 如果选择了日期范围，则根据范围过滤数据
        return this.tableData.filter(data => {
          const subTime = new Date(data.subTime);
          const startDate = new Date(this.value1[0]);
          const endDate = new Date(this.value1[1]);
          return subTime >= startDate && subTime <= endDate;
        });
      } else {
        // 如果未选择日期范围，则返回全部数据
        return this.tableData;
      }
    }
  },

  methods: {


    // 用户信息
    users() {
      getInfo().then(res => {
        this.user = res.data;
        console.log(this.user);
        this.datas();
      })
    },
    //表格数据
    datas() {
      const table = {
        s_number: this.user.username,
        status: 1
      }
      history(table).then(res => {
        this.tableData = res.data
        console.log(this.tableData);
      })
    },
    // 获取分页后数据 
    pageChange(data) {
      this.tData = data
    },

    // 提取年月日
    formatSubTime(row) {
      return row.subTime.substring(0, 10);
    },

    // 查询日期按钮方法
    dateQuery() {
      // 根据选择的日期范围过滤数据
      console.log(this.filteredData);

    }

  }

}
</script>
  
<style>
.buttons {
  margin: 10px 0;
}

/* 头部查询样式 */
.query {
  margin: 20px 0 20px 20px;
}

.tables {
  margin: 0 20px 20px 20px;
}

.page {
  width: 100%;
  text-align: end;
  padding: 15px;
}

/* 弹出层样式 */
.dialogs {
  width: 80%;
  margin: auto;
}
</style>